<template>
    <div class="div-layer">
        <div style="text-align: right;margin:10px 0">
            <Button  type="primary" @click.native="submit(true)" icon="ios-bookmark" v-show="op!='detail'" :disabled="isSubmit">提交</Button>
            <Button  type="success" icon="ios-folder-open-outline" @click.native="submit(false)" v-show="op!='detail'" :disabled="isSave">暂存</Button>
            <Button  type="error"   v-if="op=='edit'"  @click="remove">删除</Button>
            <Button  type="info" icon="ios-return-left" @click.native="closeTab">返回</Button>
        </div>
        <base-info :baseInfoForm="contract" :anchoredinfo="anchoredinfo"></base-info>
        <div class="div-entry">
            <div style="margin-right: 20px;">
                <Card>
                    <h2>延期信息</h2>
                    <Form ref="delayApp" :model="delayApp" :rules="delayAppFormRules"
                          :label-width="100" inline>
                        <Row>
                            <Col span="12">
                                <FormItem label="延期次数" prop="dtimes" class="appendicon">
                                    <Input v-model.lazy="delayApp.dtimes" placeholder="请输入延期次数" disabled
                                           type="number">
                                        <span slot="append">次</span>
                                    </Input>
                                </FormItem>
                            </Col>
                            <Col span="12">
                                <FormItem label="累计延期天数" prop="totalDays" class="appendicon">
                                    <Input v-model.lazy="delayApp.totalDays"  placeholder="请输入累计延期天数" disabled
                                           type="number">
                                        <span slot="append">天</span>
                                    </Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="12">
                                <FormItem label="申请时间" prop="cdate">
                                    <DatePicker type="date"  v-model.lazy="delayApp.cdate" disabled
                                                placeholder="请选择申请时间"></DatePicker>
                                </FormItem>
                            </Col>
                            <Col span="12">
                                <FormItem label="申请延期天数" prop="days" class="appendicon">
                                    <Input v-model.lazy="delayApp.days" placeholder="请输入申请延期天数"
                                           type="number" :disabled="op=='detail'">
                                        <span slot="append">天</span>
                                    </Input>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <Col span="12">
                                <FormItem label="延期原因" prop="reason" style="width: 100%;">
                                    <Input v-model.lazy="delayApp.reason"  placeholder="请输入延期原因"
                                           type="textarea" :rows="2" style="width:calc(100% + 300px);" :disabled="op=='detail'"/>
                                </FormItem>
                            </Col>
                        </Row>
                        <Row>
                            <div>
                                <FormItem label="情况说明" style="margin-bottom:10px;display:inline-block;margin-right: 0px;">
                                    <div class="upload" v-show='op!="detail"' style="margin-right: 10px;">
                                        <div class="upimg">
                                            <input type="file" name="file1" @change="uploadImg" ref="uploadInput">
                                            上传图片
                                        </div>
                                    </div>
                                </FormItem>
                                 <ul class="showImg over" style="display:inline-block;width: 440px;">
                                    <li v-for="(item,index) in imgurlList"  class="fl">
                                        <img  :src="item.imgurl" alt="" width="100" height="100"/>
                                        <Icon type="ios-trash-outline" style="font-size:20px;cursor: pointer;" @click="deleteImg(item.randomstr,index)"  v-show='op!="detail"'/>
                                    </li>
                                </ul>
                            </div>
                            <span style="margin-left: 100px;">支持扩展名：.jpg .bmp .jpeg .png .gif</span>
                        </Row>
                    </Form>
                </Card>
            </div>
            <div v-if="categoryList.length>0">
                <Card>
                    <h2 class="common_title">申请文件
                        <Checkbox :indeterminate="indeterminate" :value="checkAll"
                        @click.prevent.native="handleCheckAll" class="fr" style="padding-right: 30px;" :disabled='op=="detail"'>全选</Checkbox>
                    </h2>
                    <div class="common_content">
                        <div class="archiveList" style="width:85%;">
                            <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange" class="inline-block">
                                <Checkbox :label="item.code" v-for="(item,index) in categoryList"  class="mb10" :disabled='op=="detail"'>{{item.name}}</Checkbox>
                            </CheckboxGroup>
                        </div>
                    </div>
                </Card>
            </div>
        </div>
    </div>
</template>

<script>
    import baseInfo from "./baseInfo";
    import {getDictDataByType} from "../../../../basic/api/admin/datadic";
    import {
        lookDelay,
        newDelay,
        submitDelayInfo,
        getanchoredinfo,
        deleteDelay,
    } from "../../../api/post-loan-filing/delay-mng/delayListApi";
    import {
        uploadFile,
        delImage
    } from "_p/afs-apply/api/mail-manage/orderMailList.js";
    export default {
        components: {
            baseInfo
        },
        data() {
            return {
                isSave:false,
                isSubmit:false,
                delayId:"",
                datas: this.afs.getPageParams(this),
                op: this.afs.getPageParams(this).op,
                delayAppFormRules: {
                    days: [
                        {required: true, message: "申请延期天数不能为空", trigger: "blur"}
                    ],
                    reason: [
                        {required: true, message: "申请延期原因不能为空", trigger: "blur"}
                    ],
                },
                imgurlList:[],
                //合同信息
                contract: {
                },
                anchoredinfo:{

                },
                //文件类型
                categoryList: [

                ],
                //延期申请信息
                delayApp: {
                    dtimes:"",
                    totalDays:"",
                    cdate:"",
                    days:"",
                    reason:"",
                },
                //延期申请文件
                checkAll: false,
                indeterminate: false,
                checkAllGroup: [],
                //延期类型
                delayFlag:this.afs.getPageParams(this).delayFlage,
            };
        },
        created(){
            //数据初始化
            if(this.op=='add'){
                this.initGetInfo();
                this.queryanchoredinfo();
            }else if(this.op=='edit'||this.op=='detail'){
                this.editInfo();
            }
        },
        mounted() {
            console.log(this.afs.getPageParams(this),"this")
        },
        methods: {
            //关闭当前页面
            closeTab() {
                this.afs.closeTab(this);
            },
            //初始化查询客户,归档资料信息
            initGetInfo() {
                let params = {
                    delayFlag:this.delayFlag,
                    applicationNo:this.datas.camainNo
                };
                newDelay(params).then(res => {
                    if (res.code === '0000') {
                        this.contract = res.data.contract;
                        this.contract.statusfilename=res.data.contract.refData.statusfilename;
                        this.categoryList = res.data.categoryList;
                        this.delayApp = res.data.delayApp;
                        this.delayId=res.data.delayApp.id;
                    }else{
                        this.$Message.error(res.data);
                    }
                })
            },
            queryanchoredinfo(){
                let params = {
                    applicationNo:this.datas.camainNo
                };
                getanchoredinfo(params).then(res=>{
                    if(res.code=="0000"){
                       this.anchoredinfo=res.data;
                       if(res.data.refData){
                            this.anchoredinfo.anchoredtypename=res.data.refData.anchoredtypename;
                       }else{
                           this.anchoredinfo.anchoredtypename="";
                       }
                    }
                })
            },
            editInfo(){
                let params={
                    id:this.afs.getPageParams(this).id,
                }
                lookDelay(params).then(res=>{
                    if(res.code=="0000"){
                        this.contract = res.data.contract;
                        this.contract.statusfilename=res.data.contract.refData.statusfilename;
                        this.categoryList = res.data.categoryList;
                        this.delayApp = res.data.delayApp;
                        this.delayApp.days=res.data.delayApp.days.toString();
                        this.delayId=res.data.delayApp.id;
                        let tempArr=[];
                        if(res.data.categoryList&&res.data.categoryList.length>0){
                            res.data.categoryList.forEach((item,index)=>{
                                if(item.ischeck==1){
                                    tempArr.push(item.code);
                                }
                            });
                        }
                        this.checkAllGroup=tempArr;
                        console.log(this.checkAllGroup,"checkAllGroup")
                        if(this.checkAllGroup.length==res.data.categoryList.length){
                            this.checkAll=true;
                        }

                        if(res.data.md5s&&res.data.md5s.length>0){
                            let md5Arr=[];
                            res.data.md5s.forEach((item,index)=>{
                                let obj={
                                    imgurl:item.md5Byte,
                                    randomstr:item.randomStr
                                }
                                md5Arr.push(obj);
                            })
                            this.imgurlList=md5Arr;
                        }

                    }
                })

            },
            //点击提交延期申请信息
            submit(submit) {
                this.$refs.delayApp.validate((valid) => {
                    if(valid){
                        let params={
                            submit:submit,
                            applicationNo:this.contract.camainNo,
                            delayDays:this.delayApp.days,
                            delayFlag:this.delayFlag,
                            delayReason:this.delayApp.reason,
                            delayFile:"",
                            id:this.delayId,
                        }
                        // console.log(this.checkAllGroup,"checkAllGroup");
                        if(this.checkAllGroup&&this.checkAllGroup.length>0){
                            let total="";
                            this.checkAllGroup.forEach((item,index)=>{
                                if(index<this.checkAllGroup.length-1){
                                    total=total+item+',';
                                }else if(index==this.checkAllGroup.length-1){
                                    total=total+item;
                                }
                            })
                            params.delayFile=total;
                        }
                        if(submit){
                            this.isSubmit=true;
                            if(!this.checkAllGroup||this.checkAllGroup.length<0){
                                this.$Message.warning("请选择申请文件");
                                return false;
                            }
                        }else{
                            this.isSave=true;
                        }
                        submitDelayInfo(params).then(res => {
                            if (res.code === "0000") {
                                if(submit){
                                    this.isSubmit=false;
                                    this.$Message.success("提交成功");
                                    this.closeTab();
                                }else{
                                    this.$Message.success("暂存成功");
                                    this.op="edit"
                                    this.isSave=false;
                                }
                            }else{
                                this.$Message.error(res.data);
                            }
                        }).catch(e=>{
                            this.isSave=false;
                            this.isSubmit=false;
                        });
                    }
                })

            },
            //文件选择
            checkAllGroupChange (data) {
                if (data.length === this.categoryList.length) {
                    this.indeterminate = false;
                    this.checkAll = true;
                } else if (data.length > 0) {
                    this.indeterminate = true;
                    this.checkAll = false;
                } else {
                    this.indeterminate = false;
                    this.checkAll = false;
                }
            },
            //全选文件
            handleCheckAll () {
                if (this.indeterminate) {
                    this.checkAll = false;
                } else {
                    this.checkAll = !this.checkAll;
                }
                this.indeterminate = false;

                if (this.checkAll) {
                    let codeList=this.categoryList.map((item,index)=>{
                        return item.code;
                    })
                    this.checkAllGroup=codeList;
                } else {
                    this.checkAllGroup = [];
                }
            },
            //删除
            remove(){
                let params={
                    id:this.delayId,
                }
                deleteDelay(params).then(res => {
                    if (res.code === "0000") {
                        this.$Message.success("删除成功");
                        this.closeTab()
                    }
                }).catch(() => {

                });
            },
            uploadImg(e){
                let files = this.$refs.uploadInput.files;
                let AllUpExt = ".jpg|.bmp|.jpeg|.png|.gif|";
                let extName = files[0].name.substring(files[0].name.lastIndexOf(".")).toLowerCase();
                if(AllUpExt.indexOf(extName + "|") == "-1"){
                    this.$Message.warning("文件格式不正确！");
                    return;
                }

                let size = files[0].size;
                size = size/(1024*1024);
                console.log(size)
                if(size > 10){  // 10M
                    this.$Message.warning("文件过大");
                    return;
                }

                let file = files[0];
                let obj={};
                if (!e || !window.FileReader) return;
                let reader = new FileReader();
                reader.readAsDataURL(file);
                reader.onloadend = function () {
                    obj.imgurl = this.result;
                }
                let formData = new FormData();//创建 formdata对象
                formData.append('file',file);
                formData.append('cacontractId',this.delayId);
                formData.append('imCategoryCode','3701');
                uploadFile(formData).then(res=>{
                    if(res.code=="0000"){
                        obj.randomstr=res.data.randomstr;
                        this.imgurlList.push(obj);
                    }
                    this.$Message.success("上传成功");
                });
            },
            deleteImg(randomstr,index){
                // console.log(randomstr,index);
                let params={
                    randomStr:randomstr,
                }
                delImage(params).then(res=>{
                    if(res.code === "0000"){
                        this.$Message.success("删除成功");
                        this.imgurlList.splice(index,1)
                    }
                });
            },
        }
    };
</script>
<!--延期管理ui样式-->
<style scoped>
    .div-layer {
        height: 100%;
        overflow: hidden;
    }
    .div-entry{
        display: flex;
    }
    .div-entry>div{
        width: 50%;
    }
    .appendicon /deep/ .ivu-form-item-content{
        margin-top: 4px;
    }
    .demo-upload-list {
        display: inline-block;
        width: 60px;
        height: 60px;
        text-align: center;
        line-height: 60px;
        border: 1px solid transparent;
        border-radius: 4px;
        overflow: hidden;
        background: #fff;
        position: relative;
        box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
        margin-right: 4px;
    }

    .demo-upload-list img {
        width: 100%;
        height: 100%;
    }

    .demo-upload-list-cover {
        display: none;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, .6);
    }

    .demo-upload-list:hover .demo-upload-list-cover {
        display: block;
    }

    .demo-upload-list-cover i {
        color: #fff;
        font-size: 20px;
        cursor: pointer;
        margin: 0 2px;
    }
    .upload{
        width: 100px;
        height: 100px;
        border: 1px dotted #ccc;
        position: relative;
    }
    .upimg{
        width: 80px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        background: #EB9620;
        border-radius: 5px;
        color: #FFFFFF;
        position: absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%,-50%);
    }
    .upimg:hover{
        background: #EB9620;
        text-decoration: none;
    }
    .upimg input{
        position: absolute;
        left: 0;
        right:0;
        width: 100%;
        top: 0;
        bottom: 0;
        height: 100%;
        filter: alpha(opacity=0);
        opacity: 0;
        cursor: pointer;
        overflow: hidden;
    }
    .showImg i{
        position: absolute;
        right: 0;
        bottom: 0;
    }
    .showImg>li{
        width: 100px;
        height: 100px;
        position: relative;
        border: 1px dotted #ccc;
        margin-right: 10px;
    }
    .showImg>li img{
        width: 100%;
        height: 100%;
    }
</style>
